<template>
  <div class="article-list-container" :style="{ backgroundColor: modelValue?.bgColor }" @mouseenter="isHover = true" @mouseleave="isHover = false"> 
    <a-row class="article-list" :class="[modelValue?.width ? `container-content-${modelValue?.width}` : 'container-content']">
      <!-- 左侧文本 后侧媒体 -->
      <!-- 左侧一直是一半，但只有左侧时是100% -->
      <a-col :sm="{span: 24}" :md="{span: hasMedia ? 12 : 24}">
        <div class="article-list-left">
          <template v-for="item in modelValue?.data" :key="item.id">
            <Article v-if="item.type === 'Article'" :article="item"></Article>
            <Contact v-if="item.type === 'Contact'" :contact="item"></Contact>
          </template>
        </div>
      </a-col>
      <a-col v-if="hasMedia" :sm="{span: 24}" :md="{span: 12}">
        <div class="article-list-right"> 
          <template v-for="item in modelValue?.data" :key="item.id">
            <Media :type="item.type" :data="item" :preview="modelValue.isPreview"></Media>
          </template>
        </div>
      </a-col>
      <Operate v-if="!isPreview" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy" @handle-paste="handlePaste"></Operate>
    </a-row>
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { randomString } from '@/utils/common'
import Article from './article.vue'
import Contact from './contact.vue'
import Media from '@/common/Media/index.vue'
import Setting from './setting.vue'
import Operate from '@/common/Operate/index.vue'

// 定义组件名称
defineOptions({
  name: 'ArticleList'
})

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy', 'handlePaste'])

const hasMedia = computed(() => {
  if (!(props.modelValue && props.modelValue.data && props.modelValue.data.length)) return false
  return props.modelValue.data.some((item: any) => item.type === 'Image' || item.type === 'Video' || item.type === 'ImageList')
})

const handleInit = () => {
  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: 'ArticleList',
    width: '',
    bgColor: '',
    data: [
      {
        id: randomString(),
        type: 'Article',
        title: '耀华国际教育学校浙江桐乡',
        content: '耀华国际教育学校浙江桐乡校区成立于 2017 年，先进的校园设施确保学 生在安全友好的环境中学习。学校坐落于高桥镇，提供从幼儿阶段至高中 阶段 (K2 至13 年级) 的教育服务，招收2 岁至18 岁本地和外籍学生。',
        buttonList: [],
        linkList: [
          {
            id: randomString(),
            text: '了解更多',
            url: 'https://www.baidu.com',
            isExternal: false
          }
        ]
      },
      {
        id: randomString(),
        type: 'Image',
        imgSrc: 'https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg',
        caption: '',
        alt: '',
        isRound: false
      },
    ]
  }
  emit('update:modelValue', data)
} 

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit('handleDelete', props.modelValue.id)
}

const handleCopy = () => {
  emit('handleCopy', props.modelValue)
}

const handlePaste = (type: string) => {
  emit('handlePaste', type)
}

handleInit()
</script>

<style lang="scss" scoped>
/* ===== 响应式设计 - 桌面优先，确保正确的层叠顺序 ===== */

/* 基础样式 - 桌面端 (1024px 及以上) */

.article-list-container {
  width: 100%;
}
.article-list {
  position: relative;

  .add-btn {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);

    padding: 4px 8px;
    font-size: 10px;
    background: $primary-color;
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
  }
}

.article-list-right {
  margin-left: 60px;
  max-width: 409px;
}

/* 平板设备 (768px - 1023px) */
@media (max-width: 1023.98px) {
  .article-list {
    padding: 12px 24px;
    max-width: 1000px;
  }

  .article-list-right {
    justify-content: flex-end;
    margin-left: 20px;
    max-width: 320px;
  }
}

/* 小平板和大手机 (576px - 767px) */
@media (max-width: 767.98px) {
  .article-list {
    padding: 8px 12px;
    max-width: 976px;
  }

  .article-list-right {
    justify-content: flex-start;
    margin-left: 0;
    max-width: 100%;
  }
}

/* 小手机 (575px 及以下) */
@media (max-width: 575.98px) {
  .article-list {
    padding: 8px 12px;
    max-width: 100%;
  }

  .article-list-right {
    justify-content: flex-start;
    margin-left: 0;
    max-width: 100%;
  }
}
</style>